<template>
  <el-form ref="formRef" label-position="left" label-width="110px" :model="form" :rules="formRules">
    <el-form-item label="菜单标识" prop="code">
      <el-input v-model="form.code" clearable placeholder="菜单标识"></el-input>
      <div class="el-form-item-msg">
        系统唯一且与组件名一致，否则导致缓存失效。
      </div>
    </el-form-item>
    <el-form-item label="显示名称" prop="name">
      <el-input v-model="form.name" clearable placeholder="菜单名称"></el-input>
    </el-form-item>
    <el-form-item label="上级菜单" prop="parentId">
      <el-cascader clearable placeholder="顶级菜单" v-model="form.parentId"
                   :options="menuList" :props="menuProps" :show-all-levels="true" :emit-path="false"></el-cascader>
    </el-form-item>
    <el-form-item label="路由地址" prop="path" v-if="form.category !== 'BUTTON'">
      <el-input v-model="form.path" clearable placeholder="路由地址"></el-input>
    </el-form-item>
    <el-form-item label="组件视图" prop="component" v-if="form.category === 'MENU'">
      <el-input v-model="form.component" clearable placeholder="组件视图">
        <template #prepend>views/</template>
        <template #append>/index</template>
      </el-input>
    </el-form-item>
    <el-form-item label="外链地址" prop="component"
                  v-if="form.category === 'IFRAME' || form.category === 'LINK'">
      <el-input v-model="form.component" clearable placeholder="外链地址"></el-input>
    </el-form-item>
    <el-form-item label="菜单图标" prop="icon" v-if="form.category !== 'BUTTON'">
      <jcx-icon-select v-model="form.icon" clearable></jcx-icon-select>
    </el-form-item>
    <el-form-item label="菜单类型" prop="category">
      <el-radio-group v-model="form.category">
        <el-radio-button label="DIRECTORY">目录</el-radio-button>
        <el-radio-button label="MENU">菜单</el-radio-button>
        <el-radio-button label="IFRAME">Iframe</el-radio-button>
        <el-radio-button label="LINK">外链</el-radio-button>
        <el-radio-button label="BUTTON">按钮</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="菜单特征" prop="type">
      <el-radio-group v-model="form.type">
        <el-radio-button label="PLATFORM">平台菜单</el-radio-button>
        <el-radio-button label="BASIC">基本菜单</el-radio-button>
        <el-radio-button label="FREE">免费菜单</el-radio-button>
        <el-radio-button label="PAY">付费菜单</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="是否启用" prop="enabled">
      <el-radio-group v-model="form.enabled">
        <el-radio-button :value="true" border>启用</el-radio-button>
        <el-radio-button :value="false" border>停用</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="排序" prop="sort">
      <el-input-number v-model="form.sort" :precision="2" :min="1" :step="0.01"
                       controls-position="right"></el-input-number>
    </el-form-item>
    <el-form-item label="是否隐藏" prop="meta.hidden">
      <el-checkbox v-model="form.hidden">隐藏菜单</el-checkbox>
      <div class="el-form-item-msg">菜单不显示在导航中，但用户依然可以访问，例如详情页</div>
    </el-form-item>
  </el-form>
</template>

<script setup lang="js">
import {reactive, ref} from "vue";

const props = defineProps({
  form: {
    type: Object,
    default: {}
  },
  menuList: {
    type: Array,
    default: () => []
  }
})
const formRef = ref(null);
const menuProps = {
  label: "name",
  value: 'id',
  children: "children",
  checkStrictly: true,
  emitPath: false
}
const formRules = reactive({
  code: [{required: true, message: "菜单标识为必填项", trigger: "blur"}],
  name: [{required: true, message: "菜单名称为必填项", trigger: "blur"}],
  path: [{required: true, message: "路径为必填项", trigger: "blur"}],
  icon: [{required: true, message: "图标为必填项", trigger: "blur"}],
  component: [{required: true, message: "组件为必填项", trigger: "blur"}],
  component1: [{required: true, message: "外链地址为必填项", trigger: "blur"}],
  parentId: [{required: true, message: "父菜单为必填项", trigger: "blur"}],
  type: [{required: true, message: "类型为必填项", trigger: "blur"}],
  category: [{required: true, message: "分类为必填项", trigger: "blur"}],
  hidden: [{required: true, message: "是否隐藏为必填项", trigger: "blur"}],
  enabled: [{required: true, message: "是否启用为必填项", trigger: "blur"}],
  sort: [{required: true, message: "排序为必填项", trigger: "blur"}],
});

const getFormRef = () => {
  return formRef.value;
}

defineExpose({getFormRef});
</script>
